<template>
<view>
 <view class="top">
	<!-- 日期块 -->
	<view class="date">
		<view class="rootManger">
			<view class="btnManger">
			 <text style="border-radius:  50rpx 0 0 50rpx ;" :class="[jump==0? 'btn':'btn1']" @click="jump=0">今日</text>
			 <text style="border-radius: 0 50rpx  50rpx 0;" :class="[jump==0? 'btn1':'btn']" @click="jump=1">昨日</text>
			</view>
			
			<view  class="iconManger">
				 <uni-data-select
				 :clear="false"
				        :localdata="range">
					  </uni-data-select>
					  <text style="font-size: 23rpx;">自定义</text>
			</view>	
		</view>
		<!-- 分割线 -->
		<view class="br"></view>
		
		<view class="directionManger">
			<view class="right">
				<view class="rightImage">
				 <image src="../../static/收入@2x.png" mode="" class="image"></image>
				</view>
				<view class="right-title">
					<text>
						￥2066.56\n
					</text>
					<text>
						收入
					</text>
				</view>
			</view>
				
			<view class="right">
				<view class="leftImage">
				 <image src="../../static/订单-全部订单@2x.png" mode="" class="image"></image>
				</view>
				<view class="right-title">
					<text>
						53\n
					</text>
					<text>
						订单量
					</text>
				</view>
			</view>
			
		</view>
		
		
		
		
	</view>
	
	
	<!-- 收入分布 -->
	<view class="date" style="margin-top: 1vh; height: 23vh;">
		<view style="font-size: 27rpx;font-weight: bold;">收入分布</view>
		<view class="br"></view>
		<!-- 饼状图 -->
		 <view class="charts-box">
		    <qiun-data-charts 
		      type="ring"
		      :opts="opts"
		      :chartData="chartData"
		    />
		  </view>
	</view>
	
	<!-- 订单分布 -->
	<view class="date" style="margin-top: 1vh; height: 26vh;">
		<view style="font-size: 27rpx;font-weight: bold;">订单分布</view>
		<view class="br"></view>
		<!-- 饼状图 -->
		  <view class="charts-box">
		    <qiun-data-charts 
		      type="mount"
		      :opts="opt"
		      :chartData="chData"
		    />
		  </view>
	</view>
 </view>


</view>
	
</template>

<script>
	export default {
		data() {
			return {
				
			 jump:0,
				range: [
				          { value: 0, text: "一周内" },
				          { value: 1, text: "一个月内" },
				          { value: 2, text: "三个月内" },
						   { value: 2, text: "半年内" },
						    { value: 2, text: "一年内" },
				        ],
				chartData: {},
				      //您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				      opts: {
				        rotate: false,
				        rotateLock: false,
						subtitle:false,
						title:false,
				        color: ["#9A60B4","#ea7ccc","#9A60B4","#ea7ccc"],
				        padding: [0,0,25,10],
				        dataLabel: true,
				        enableScroll: false,
				        legend: {
				          show: true,
				          position: "right",
				          lineHeight: 25,
						
						 
				        },
	
				        extra: {
				          ring: {
				            ringWidth: 20,
				            activeOpacity: 0.5,
				            activeRadius: 10,
				            offsetAngle: 120,
				            labelWidth: 15,
				            border: true,
				            borderWidth: 3,
				            borderColor: "#FFFFFF"
				          },
						  tooltip:{
							legendShape:'rect'  
						  }
				        }
				      },
						//柱状图
							  chData:{},
							  opt:{
								   color: ["#72a7fc","#8ce5fc","#fbc272","#72a7fc","#8ce5fc","#fbc272"],
								          padding: [15,15,0,5],
								          enableScroll: false,
								          legend: {
											  show: true,
											  position: "right",
											  lineHeight: 25,
											  
										  },
								          xAxis: {
								            disableGrid: true
								          },
								          yAxis: {
								            data: [
								              {
								                min: 0
								              }
								            ]
								          },
								          extra: {
								            mount: {
								              type: "bar",
								             widthRatio: 0.3,
								              activeBgColor: "#000000",
								              activeBgOpacity: 0.08,
								              linearType: "custom",
								              seriesGap: 5,
								              linearOpacity: 0.5,
								              barBorderCircle: true,
								             
								            },
											tooltip:{
								           legendShape:'rect'  
											}
								          },
										 
											 
										  
							  },
							  
			}
		},
		 onReady() {
			 this.getData();
		  this.getServerData();
		   
		  },
		methods: {
	  getServerData() {
	      //模拟从服务器获取数据时的延时
	      setTimeout(() => {
	        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
	        let res = {
	            series: [
	              {
	                data: [{"name":"洗车","value":500,"labelText":"洗车"+500+"元",'legendShape':'rect'},{"name":"保养","value":1566.65,"labelText":"保养"+1566.65+"元",'legendShape':'rect'}],
					}
	            ]
	          };
	        this.chartData = JSON.parse(JSON.stringify(res));
	      }, 500);
	    },
				//柱状图
				getData(){
					 //模拟从服务器获取数据时的延时
					      setTimeout(() => {
					        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					        let res = {
					         
					            series: [
									{
										data:[{name: "维修","value":300, 'legendShape':'rect'  },{name: "保养","value":170,'legendShape':'rect'},{name: "洗车","value":346,'legendShape':'rect'}],
										}							 
					            ]
					          };
					        this.chData = JSON.parse(JSON.stringify(res));
					      }, 500);
				},
				
				
				
			  }
	}
</script>

<style>
	.br{
		width: 100%;
		height: 7rpx;
		background-color:#efeff5 ;
		margin: 10rpx auto;
	}
.top{
	width: 100vw;
		height: 20vh;
		background-color: #3082fa;
		z-index: -1;
	}
.date{
	background-color: white;
	width: 85vw;
	height:26vh ;
	margin: 0 auto;
	border-radius: 13rpx 13rpx 13rpx 13rpx;
	box-shadow: 3rpx 3rpx 3rpx 2rpx rgba(0, 0, 0, 0.2);
	padding: 5vw 5vw 5vw 5vw;

}
.rootManger{
	display: flex;
	width: 60vw;
	padding-left: 27vw;
	justify-content: space-between;
/* border: 1rpx solid black; */
}
.btnManger{
	display: flex;
	/* border:  1rpx solid red; */
	width: 30vw;
	
}
.btn{
	width: 50%;
	height: 60rpx;
	font-size: 25rpx;
	text-align: center;
line-height: 60rpx;
background-color: #3082fa;
color: white;
}
.btn1{
	width: 50%;
		height: 60rpx;
		font-size: 25rpx;
		text-align: center;
	line-height: 60rpx;
	background-color: #f0f0f0;
	color: #3082fa;
}
.iconManger{
	display: flex;
	/* border: 1rpx solid red; */
	width: 24%;
	height: 20rpx;
	padding: 20rpx 0 20rpx 10%;
	align-items: center;
	
}
.uni-select{
	border: none !important;
	outline: none !important;
	background-image: url("../../static/icons8-日历-50.png") ;
	background-size: 30rpx;
	width: 30rpx !important;
	height:30rpx !important;
	
}

.uni-select__selector{
width: 180rpx !important;
left: -5vw !important;
}
.uni-select__input-placeholder{
	color: transparent !important;
}
.uni-select__input-text{
	color: transparent !important;
}
.uni-icons{
	color: transparent !important;
	
}
	.uni-popper__arrow_bottom,
	.uni-popper__arrow_bottom::after,
	.uni-popper__arrow_top,
	.uni-popper__arrow_top::after{
		border-style: hidden !important;
	}
	.directionManger{
		margin: 0 auto;
		width: 70vw;
		display: flex;
		justify-content: space-between;
				
	}
.right{
	margin-top: 2vh;
	width: 30vw;
	height: 90%;
	border-radius: 15rpx 15rpx 15rpx 15rpx;
box-shadow: 3rpx 3rpx 3rpx 2rpx rgba(0, 0, 0, 0.2);
}
.rightImage{
	width: 50rpx;
	height: 50rpx;
	position: relative;

 background: linear-gradient(to bottom right, #fd975c,#fc6831);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	margin: 20% auto;
}
.image{
	position: absolute;
	width: 30rpx;
	height: 30rpx;
	top: 20%;
	left: 20%;
}
.right-title{
	position: relative;
	text-align: center;
	font-size: 25rpx;
	line-height: 3vh;
	bottom: 3vh;
}
.leftImage{
	width: 50rpx;
		height: 50rpx;
		position: relative;
	background: linear-gradient(to bottom right, #66aff6,#2370ef);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 20% auto;
}
  .charts-box {
    width: 100%;
    height: 300rpx;
  }
</style>
